<template>
    <div class="box">
        <h4>组件A</h4>
        <p>vuex msg :{{ msg }}</p>
        <input type="text" v-model="msg">
        <p>vuex user( <input type="button" value="点击更新" @click="initUser('22222222')"> ) :{{ user }}</p>
    </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
    computed:{
        // ...mapState(["msg"])
        ...mapState(["user"]),
        msg:{
            get(){
                return this.$store.state.msg
            },
            set(nv){
                // vuex 不建议直接对仓库state变量进行修改，因为无法由调试工具记录日志
                // vuex 提供专用于日志记录的触发方法 
                // this.$store.state.msg = nv
                // console.log(this.$store);
                this.$store.commit("setMsg",nv)
            }
        }
    },
    methods:{
        ...mapActions(["initUser"])
    }
}
</script>

<style scoped>
.box{
    min-height: 400px;
    border: 4px dashed #ccc;
}
</style>